<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="./vue.js"></script>	
	</head>
	<body>
		<!-- 
			1.Vue工作，必须创建一个Vue实例，且需传入一个配置对象；
			2.root容器里的代码依然符合html，只不过混入了一些特殊的Vue语法
			3.root容器里的代码被称为【Vue模板】
			4.Vue模板一一对应
			5.真实开发中只有一个Vue实例，并且配合着组件一起使用
			6.{{xxx}}中xxx写js表达式，且xxx可以自动读取到该data中的所有属性
			7.一旦data中数据发生改变，那么模板中用的该数据的地方也会自动更新
			注意区分js表达式和js代码（语句）
				1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方；
				
		 -->
		<div class="root">
				<!--  
					toUpperCase()用于将小写字符转换为大写
				-->
			<h1>Hello,{{name.toUpperCase()}},{{address}},{{Date.now()}}</h1>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip = false	//阻止vue在启动时生成生产提示。
			//创建Vue实例
			new Vue({
				el:'.root',		//el用于指定当前VUe实例为哪个容器服务，值通常为css选择器字符串
				data:{			//data用于存储数据，数据供el所指定的容器去使用，值暂时定为一个对象
					name:'fymt',
					address:'罗德岛'
				}
			})
		</script>
	</body>
</html>
